import Taro, {Component} from "@tarojs/taro";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {View, Image, Text } from "@tarojs/components";
import {getRuntime, ServerHost, pageSize, subtime} from '../../utils/common'

import './profitRecord.less'

import icon_23 from "../../assets/img/icon_23.png";
import noneIcon from "../../assets/img/none_order.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class MineProfitRecord extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [],
    totalCount: 0,
    pageIndex: 1,
    pageSize,
    cashTotalAmount: 0, // 用户提现总金额
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title: '提现记录' })
    this.getCashTotalAmount()
    this.getUserCashes()
  }

  getUserCashes() {
    let { userStore } = this.props.stores
    let { pageIndex, pageSize } = this.state
    userStore.getUserCashes({
      formCashType: 1,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  getCashTotalAmount() {
    let {userStore} = this.props.stores
    userStore.getCashTotalAmount({
      callback: res => {
        this.setState({ cashTotalAmount: res.amount || 0 })
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getUserCashes()
      })
    }
  }




render() {
    let { items,cashTotalAmount } = this.state
    return (
      <View className='mine-profit-record'>
        {
          items.length>0&&
          <View className='profit-total color-dark'>
             累计提现金额：{cashTotalAmount}元
          </View>
        }
        <View className='mine-profit-record__main'>
        {
          items.length>0&&
          <View className='list-03'>
            {
              items.map(item => {
                return(
                  <View className='list-03__item'>
                    <Image className='list-03__avatar' src={icon_23} />
                    <View className='list-03__info'>
                      {item.cashType===1&&  <View className='list-03__title'>收益提现</View>}
                      {item.cashType===2&&  <View className='list-03__title'>分红提现</View>}
                      <View className='list-03__date font-dark'>{subtime(item.creationTime)}</View>
                    </View>
                    <View className='list-03__profit'>
                      <View className='list-03__money'>-{item.amount}<Text className='small'>元</Text></View>
                      {
                        // 审核未通过，显示审核状态
                        item.verifyStatus !==1 &&
                        <View className='list-03__state color-theme'>{item.verifyStatusView}</View>
                      }
                      {
                        item.verifyStatus ===1 &&
                        // 审核通过，显示提现
                        <View className='list-03__state color-theme'>{item.statusView}</View>
                      }
                    </View>
                  </View>
                )
              })
            }
          </View>
        }
        {
          items.length<=0&&
          <View className='none'>
             <Image className='none-icon' src={noneIcon} />
             <View className='none-tips'>暂时还没有任何提现记录！</View>
          </View>
        }
        </View>
      </View>
    )
  }
}

export default MineProfitRecord
